<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.baba{
				background: skyblue;
				position: relative;
				width:500px;
				height: 500px;
				border: 1px solid firebrick;
				margin: 0 auto;
			}
			.son{
				/*设置不透明度*/
				opacity: .8;
				position: absolute;
				left: 0;
				top:0;
				width:100px;
				height: 100px;
			}
			.one{
				top:50%;
				left: 50%;
				/*transform: translate(-50%,-50%);*/
				background: rgba(255,0,0,1);
				z-index:100;
			}
			.two{
				z-index: 5;
				top:100px;
				left: 100px;
				background: rgba(0,255,0,1);
			}
			.three{
				z-index: 2;
				top:120px;
				left:120px;
				background: rgba(0,0,255,1);
			}
		</style>
	</head>
	<body>
		<div class="baba">
			<div class="son one"></div>
			<div class="son two"></div>
			<div class="son three"></div>
		</div>
	</body>
</html>
